<script setup>
import { ref } from 'vue'

const studentForm = ref({
  name: '',
  studentId: ''
})

const students = ref([])

const addStudent = () => {
  if (!studentForm.value.name || !studentForm.value.studentId) return
  
  students.value.push({
    id: students.value.length + 1,
    ...studentForm.value
  })
  
  // 清空表单
  studentForm.value.name = ''
  studentForm.value.studentId = ''
}

const handleFileChange = (file) => {
  // 处理文件导入逻辑
  console.log(file)
}
</script>

<template>
  <div class="student-management">
    <h2>学生管理</h2>
    
    <!-- 手动添加学生 -->
    <el-form :model="studentForm" label-width="80px">
      <el-form-item label="学生姓名">
        <el-input v-model="studentForm.name"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="studentForm.studentId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addStudent">添加学生</el-button>
      </el-form-item>
    </el-form>
    
    <!-- 批量导入 -->
    <div class="batch-import">
      <h3>批量导入</h3>
      <el-upload
        action=""
        :auto-upload="false"
        :on-change="handleFileChange"
      >
        <el-button type="primary">选择文件</el-button>
        <template #tip>
          <div class="el-upload__tip">
            请上传Excel格式的学生名单
          </div>
        </template>
      </el-upload>
    </div>
    
    <!-- 学生列表 -->
    <el-table :data="students" style="width: 100%" height="400">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="studentId" label="学号"></el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.student-management {
  padding: 20px;
}
.batch-import {
  margin: 20px 0;
}
</style>